{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>完成详情</title>
<style type="text/css">
    .mui-content{ background-color: #fff;}
    .mui-scroll-wrapper,.mui-scroll{ position: relative !important;}
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <div id="slider" class="mui-slider">
        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <a class="mui-control-item" href="#item1mobile">
                已完成
            </a>
            <a class="mui-control-item" href="#item2mobile">
                未完成
            </a>
        </div>
        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view">
                            {%for item in data%}
                            <li class="mui-table-view-cell">
                                <a class="mui-navigate-right" href="completedetail?id={{item.id}}">
                                    {{item.studentName}}
                                    <span class="mui-badge">{{item.accuracy}}%，完成时间{{item.finishDate}}"</span>
                                </a>
                            </li>
                            {%endfor%}
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div id="scroll2" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="mui-scroll">
                            <ul class="mui-table-view">
                                {%for item in undata%}
                                <li class="mui-table-view-cell">
                                    {{item.studentName}}
                                    <input type="button" class="mui-btn" value="提醒" />
                                </li>
                                {%endfor%}
                            </ul>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{% endblock %}

{#js代码#}
{% block js %}
<script type="text/javascript">
    (function($) {
        $('.mui-scroll-wrapper').scroll({
            indicators: true //是否显示滚动条
        });
    })(mui);
</script>
<!--flotdemo-->
{% endblock %}
